<template>
  <div>
    <ReturnBar name="挂号详情"></ReturnBar>
    <div class="info">
      <div class="info-item">
        <div class="info-label">医院</div>
        {{ registrationInfo.hospitalName }}
      </div>
      <div class="info-item">
        <div class="info-label">科室</div>
        {{ registrationInfo.sectionName }}
      </div>
      <div class="info-item">
        <div class="info-label">医生</div>
        {{ registrationInfo.doctorName }}
      </div>
      <div class="info-item">
        <div class="info-label">地址</div>
        {{ registrationInfo.address }}
      </div>
      <div class="info-item">
        <div class="info-label">挂号日期</div>
        {{ registrationInfo.date }}
      </div>
    </div>

    <div v-if="registrationInfo.diagnose === '' || registrationInfo.diagnose === null">
      <el-button
        v-show="registrationInfo.isPayment === 0"
        color="rgba(213, 235, 225, 0.5)"
        class="button"
        @click="toPayment"
        >支付</el-button
      >
      <el-button
        v-show="registrationInfo.isPayment === 1"
        color="rgba(213, 235, 225, 0.5)"
        class="button"
        @click="toHospital"
        >已到医院</el-button
      >
      <div
        v-show="registrationInfo.isPayment === 2"
        class="button"
        @click="doAtHospital"
      >
        请等待医生叫号
      </div>
    </div>
    <div v-else class="info">
      <div class="info-item">诊断情况</div>
      <el-input style="margin-top: 10px" v-model="registrationInfo.diagnose" type="textarea" disabled>
      </el-input>
    </div>
  </div>
</template>

<script>
import ReturnBar from "@/components/ReturnBar.vue";
import { selectById, atHospital } from "@/api/registration";

export default {
  name: "",
  data() {
    return {
      registrationInfo: "",
    };
  },
  methods: {
    toPayment() {
      this.$router.push({
        name: "Payment",
        query: {
          registrationId: this.$route.query.registrationId,
        },
      });
    },

    toHospital() {
      this.doAtHospital();
      this.$router.go(-1);
    },

    doSelectById() {
      selectById({
        registrationId: this.$route.query.registrationId,
      }).then((res) => {
        this.registrationInfo = res.data;
      });
    },
    doAtHospital() {
      atHospital({
        registrationId: this.registrationInfo.registrationId,
        doctorId: this.registrationInfo.doctorId,
        patient: this.registrationInfo.patient,
        date: this.registrationInfo.date,
        isAppointment: this.registrationInfo.isAppointment,
        isComplete: this.registrationInfo.isComplete,
        isPayment: this.registrationInfo.isPayment,
      }).then((res) => {});
    },
  },
  created() {
    this.doSelectById();
  },
  components: { ReturnBar },
};
</script>

<style scoped>
.info {
  color: #80a492;
  border-radius: 10px;
  width: 250px;
  background-color: rgba(213, 235, 225, 0.5);
  margin: 20px;
  padding: 20px;
}

.info-item {
  display: flex;
}

.info-label {
  width: 100px;
}

.button {
  margin: 20px;
  color: #80a49e;
}
</style>